<template>
	<div>
		<v-row>
			<!-- 个人信息基本信息展示start -->
			<v-col
				class=""
				cols="6"
			>
				<v-responsive class="mt-10 d-flex flex-column align-center">
					<v-avatar size="200">
						<img
							src="/images/avatar-1.jpg"
							alt=""
						>
					</v-avatar>
					<p
						class="mt-10"
						style="fontSize:20px"
					></p>
					<div class="ml-10">
						<p>账号：{{account}}</p>
						<p>姓名：{{name}}</p>
						<p>性别：{{sex}}</p>
						<p>学院：{{coid}}</p>
						<p>电话：{{phone}}</p>
						<p>邮箱：{{email}}</p>
					</div>
				</v-responsive>
			</v-col>
			<!-- 个人信息基本信息展示end -->

			<!-- 个人参与课程展示start -->
			<v-col>
				<v-card
					flat
					max-width="450"
					class="mt-15"
				>
					<v-list three-line>
						<template v-for="course in courses">
							<v-subheader
								v-if="course.header"
								v-text="course.header"
							></v-subheader>
							<v-list-item v-else>
								<v-list-item-avatar>
									<v-img :src="course.avatar"></v-img>
								</v-list-item-avatar>
								<v-list-item-content>
									<v-list-item-title v-html="course.name"></v-list-item-title>
									<v-list-item-subtitle v-html="course.des"></v-list-item-subtitle>
								</v-list-item-content>
							</v-list-item>
						</template>
					</v-list>
				</v-card>
			</v-col>
			<!-- 个人参与课程展示end -->
		</v-row>
	</div>
</template>

<script>
// 个人基础信息和参与课程介绍模块
import {
	getTeacherInfo,
	getStudentInfo,
	getTeacherClasses,
	getStudentClasses,
} from '@/api/Info'
import { getUserAccount } from '@/api/Login'

export default {
	name: 'Info',
	data() {
		return {
			//用户基础信息
			account: '',
			sex: '',
			num: '',
			phone: '',
			name: '',
			coid: '信息学院',
			email: '',
			// 课程信息
			courses: [{ header: '科目' }],
		}
	},

	created() {
		this.account = getUserAccount()
		// 获取老师/学生个人信息
		let requestsInfo = {
			s: getStudentInfo,
			t: getTeacherInfo,
		}
		requestsInfo[this.account[0]]({
			[this.account[0] + 'num']: this.account,
		}).then((res) => {
			this.sex = res.data[this.account[0] + 'sex'] === 'm' ? '男' : '女'
			this.phone = res.data[this.account[0] + 'phone']
			this.name = res.data[this.account[0] + 'name']
			this.coid = ['信息学院', '植科院', '工学院'][res.data.coid]
			this.email = res.data.email
		})

		// 获取老师/学生课程列表
		let requestsClasses = {
			t: getTeacherClasses,
			s: getStudentClasses,
		}
		requestsClasses[this.account[0]]({
			[this.account[0] + 'num']: this.account,
		}).then((res) => {
			res.data.forEach((item, index) => {
				this.courses.push({
					name: item.cname,
					avatar:
						'https://cdn.vuetifyjs.com/images/lists/' +
						(index > 4 ? (index % 4 === 0 ? 1 : index % 4) : index + 1) +
						'.jpg',
					des: `<span class="text--primary">${item.cname}</span> &mdash; 是一门有趣的学科。`,
				})
			})
		})
	},

	methods: {
		// TODO:课程列表缺少分页：课程数目足够多的时候才进行分页（该功能可有可无，
		// 哪里有老师教授那么多的课程，学生倒是可能选择多门课程）
	},
}
</script>